<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import api from '@/api'

const router = useRouter()

// 当前标签页
const activeTab = ref('recommend')

// 视频列表
const videoList = reactive([
  {
    id: 1,
    title: '低空旅游体验：俯瞰千岛湖美景',
    author: '蓝天飞行员',
    avatar: 'https://picsum.photos/200/200?random=1',
    cover: 'https://pan.feiwow.com/raw/files/17b90398-8f34-4509-952d-79cb8dbdff07-1749241617399.png',
    views: 12543,
    likes: 1254,
    duration: '03:45',
    category: 'recommend'
  },
  {
    id: 2,
    title: '飞行培训第一课：认识飞机基本结构',
    author: '航空教练',
    avatar: 'https://picsum.photos/200/200?random=2',
    cover: 'https://pan.feiwow.com/raw/files/9f8e76e6-3aed-41e0-bb68-ac8c995abfbe-1749241924810.png',
    views: 8765,
    likes: 976,
    duration: '05:21',
    category: 'education'
  },
  {
    id: 3,
    title: '2023航空展精彩回顾',
    author: '航空资讯',
    avatar: 'https://picsum.photos/200/200?random=3',
    cover: 'https://pan.feiwow.com/raw/files/0918b246-4f79-4516-b300-dd70ddbb7834-1749241488302.jpeg',
    views: 23456,
    likes: 2187,
    duration: '08:32',
    category: 'recommend'
  },
  {
    id: 4,
    title: '飞行员视角：穿越云层的震撼体验',
    author: '专业飞行员',
    avatar: 'https://picsum.photos/200/200?random=4',
    cover: 'https://pan.feiwow.com/raw/files/17b90398-8f34-4509-952d-79cb8dbdff07-1749241617399.png',
    views: 34567,
    likes: 3421,
    duration: '04:18',
    category: 'experience'
  },
  {
    id: 5,
    title: '如何选择适合自己的私人飞机',
    author: '航空顾问',
    avatar: 'https://picsum.photos/200/200?random=5',
    cover: 'https://pan.feiwow.com/raw/files/9f8e76e6-3aed-41e0-bb68-ac8c995abfbe-1749241924810.png',
    views: 7654,
    likes: 876,
    duration: '06:45',
    category: 'education'
  },
  {
    id: 6,
    title: '航空科技最新发展趋势',
    author: '科技观察员',
    avatar: 'https://picsum.photos/200/200?random=6',
    cover: 'https://pan.feiwow.com/raw/files/0918b246-4f79-4516-b300-dd70ddbb7834-1749241488302.jpeg',
    views: 9876,
    likes: 1098,
    duration: '07:23',
    category: 'recommend'
  }
])

// 根据当前标签过滤视频
const filteredVideos = computed(() => {
  if (activeTab.value === 'recommend') {
    return videoList
  } else {
    return videoList.filter(video => video.category === activeTab.value)
  }
})

// 当前播放的视频
const currentVideo = ref(null)
const isPlaying = ref(false)

// 页面加载完成后初始化
onMounted(() => {
  loadVideoList()
})

// 加载视频列表
const loadVideoList = async () => {
  try {
    // 实际项目中应该从API获取数据
    // const response = await api.video.getVideoList()
    // videoList.value = response.data
    console.log('加载视频列表')
  } catch (error) {
    console.error('加载视频列表失败:', error)
  }
}

// 处理视频点击
const handleVideoClick = (video) => {
  console.log('点击视频:', video.title)
  router.push({
    path: '/video-detail',
    query: { id: video.id }
  })
}

// 切换标签页
const switchTab = (tab) => {
  activeTab.value = tab
}

// 播放视频
const playVideo = (video) => {
  // 阻止冒泡，避免触发卡片点击事件
  event.stopPropagation()
  
  currentVideo.value = video
  isPlaying.value = true
  Toast('视频播放功能开发中')
}

// 点赞视频
const likeVideo = (video) => {
  // 阻止冒泡，避免触发卡片点击事件
  event.stopPropagation()
  
  video.likes++
  Toast('点赞成功')
}

// 格式化观看次数
const formatViews = (views) => {
  if (views < 1000) {
    return views.toString()
  } else if (views < 10000) {
    return (views / 1000).toFixed(1) + 'k'
  } else {
    return (views / 10000).toFixed(1) + 'w'
  }
}
</script>

<template>
  <div class="page-container">
    <!-- 顶部导航栏 -->
    <div class="navbar">
      <div class="search-bar">
        <van-icon name="search" class="search-icon" />
        <input type="text" placeholder="搜索视频" class="search-input" />
      </div>
    </div>
    
    <!-- 标签栏 -->
    <div class="tab-bar">
      <div 
        class="tab-item" 
        :class="{ active: activeTab === 'recommend' }"
        @click="switchTab('recommend')"
      >
        推荐
      </div>
      <div 
        class="tab-item" 
        :class="{ active: activeTab === 'education' }"
        @click="switchTab('education')"
      >
        教育
      </div>
      <div 
        class="tab-item" 
        :class="{ active: activeTab === 'experience' }"
        @click="switchTab('experience')"
      >
        体验
      </div>
      <div 
        class="tab-item" 
        :class="{ active: activeTab === 'news' }"
        @click="switchTab('news')"
      >
        资讯
      </div>
    </div>
    
    <!-- 视频列表 -->
    <div class="video-list">
      <div 
        v-for="video in filteredVideos" 
        :key="video.id" 
        class="video-card"
        @click="handleVideoClick(video)"
      >
        <div class="video-cover">
          <img :src="video.cover" :alt="video.title">
          <div class="video-duration">{{ video.duration }}</div>
          <div class="video-play-btn" @click="(event) => playVideo(video, event)">
            <van-icon name="play-circle-o" />
          </div>
        </div>
        <div class="video-info">
          <div class="video-author">
            <img :src="video.avatar" :alt="video.author" class="author-avatar">
            <div class="author-name">{{ video.author }}</div>
          </div>
          <div class="video-title">{{ video.title }}</div>
          <div class="video-meta">
            <span class="video-views">{{ formatViews(video.views) }}次观看</span>
            <div class="video-likes" @click="(event) => likeVideo(video, event)">
              <van-icon name="like-o" />
              <span>{{ video.likes }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 视频播放弹窗 -->
    <van-popup
      v-model:show="isPlaying"
      position="bottom"
      :style="{ height: '50%' }"
      round
    >
      <div class="video-player" v-if="currentVideo">
        <div class="player-header">
          <div class="player-title">{{ currentVideo.title }}</div>
          <van-icon name="cross" @click="isPlaying = false" />
        </div>
        <div class="player-content">
          <div class="player-placeholder">
            <van-icon name="video-o" />
            <div>视频播放器开发中</div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<style scoped>
.page-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 60px;
}

/* 顶部导航栏 */
.navbar {
  background-color: white;
  padding: 10px 15px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 20px;
  padding: 8px 15px;
}

.search-icon {
  margin-right: 10px;
  color: #999;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 14px;
}

/* 标签栏 */
.tab-bar {
  display: flex;
  background-color: white;
  padding: 0 10px;
  overflow-x: auto;
  white-space: nowrap;
  position: sticky;
  top: 58px;
  z-index: 99;
}

.tab-item {
  padding: 12px 15px;
  font-size: 14px;
  position: relative;
}

.tab-item.active {
  color: var(--primary-color);
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 15px;
  height: 3px;
  background-color: var(--primary-color);
  border-radius: 3px;
}

/* 视频列表 */
.video-list {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 15px;
}

.video-card {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.video-cover {
  position: relative;
  padding-top: 56.25%; /* 16:9 宽高比 */
}

.video-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 50px;
  opacity: 0.8;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.video-info {
  padding: 12px;
}

.video-author {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.author-avatar {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  margin-right: 8px;
}

.author-name {
  font-size: 12px;
  color: #666;
}

.video-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  line-height: 1.4;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

.video-likes {
  display: flex;
  align-items: center;
}

.video-likes .van-icon {
  margin-right: 4px;
}

/* 视频播放器 */
.video-player {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.player-title {
  font-size: 16px;
  font-weight: bold;
}

.player-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.player-placeholder {
  text-align: center;
  color: #999;
}

.player-placeholder .van-icon {
  font-size: 50px;
  margin-bottom: 10px;
}

/* 适配平板和大屏手机 */
@media (min-width: 768px) {
  .video-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>